<template>
	<view class="home-container">
		<gui-page-loading ref="guipageloading">
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<!-- 头部区域 -->
		<view class="header-section">
			<view class="location-bar" @tap="goto_city">
				<text class="location-icon">📍</text>
				<text class="location-text">{{ default_city }}</text>
				<text class="dropdown-icon">▼</text>
			</view>
		</view>

		<!-- 轮播图区域 -->
		<view class="swiper-section">
			<gui-swiper :swiperItems="swiperItems" :width="750" :height="360" 
				style="border-radius: 20rpx; overflow: hidden; box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.1);"></gui-swiper>
		</view>

		<!-- 导航切换 -->
		<view class="nav-section">
			<view class="nav-container">
				<view 
					class="nav-item" 
					:class="{ 'nav-active': nav_index === item.id }"
					v-for="(item, index) in nav_list" 
					:key="index"
					@tap="navchange(item.id)"
				>
					<text class="nav-text">{{ item.name }}</text>
				</view>
				<view class="nav-indicator" :style="{ transform: `translateX(${nav_index * 100}%)` }"></view>
			</view>
		</view>

		<!-- 球室列表 -->
		<view class="content-section" v-if="nav_index == 1">
			<view class="shop-list">
				<view 
					class="shop-card" 
					v-for="(item, index) in shop_list"
					:key="index" 
					@tap="goto_shop_details(item.id)"
				>
					<view class="shop-image-container">
						<image :src="item.logo" class="shop-image"></image>
						<view class="shop-badge">球室</view>
					</view>
					<view class="shop-content">
						<text class="shop-name">{{ item.name }}</text>
						<view class="shop-address">
							<text class="address-icon">📍</text>
							<text class="address-text">{{ item.address }}</text>
						</view>
						<view class="shop-contact">
							<text class="contact-icon">📞</text>
							<text class="contact-text">{{ item.phone_number }}</text>
						</view>
					</view>
					<view class="shop-arrow">
						<text class="arrow-icon">></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 球伴列表 -->
		<view class="content-section" v-if="nav_index == 0">
			<!-- 筛选器 -->
			<view class="filter-section">
				<view class="filter-container">
					<view 
						class="filter-item" 
						:class="{ 'active': teacher_type_index === -1 }"
						@tap="filterTeacher(-1)"
					>
						<text class="filter-icon">👥</text>
						<text class="filter-text">全部</text>
					</view>
					<view 
						class="filter-item" 
						:class="{ 'active': teacher_type_index === item.type }"
						v-for="(item, index) in teacher_nav_list" 
						:key="index"
						@tap="filterTeacher(item.type)"
					>
						<text class="filter-icon">{{ item.icon }}</text>
						<text class="filter-text">{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- 教练卡片列表 -->
			<view class="coach-list">
				<view 
					class="coach-card" 
					v-for="(item, index) in products" 
					:key="index"
				>
					<view class="coach-header">
						<view class="coach-avatar-container">
							<image :src="item.avatar_pic" class="coach-avatar"></image>
							<view class="status-indicator" :class="{ 'online': item.is_online == 1 }">
								<text class="status-text">{{ item.is_online == 1 ? '在线' : '离线' }}</text>
							</view>
						</view>
						<view class="coach-info">
							<text class="coach-name">{{ item.nickname }}</text>
							<view class="coach-meta" v-if="item.is_online == 1">
								<text class="distance-text">距离：{{ item.distance }}</text>
							</view>
							<view class="coach-meta">
								<text class="time-text">最早可约：{{ item.early_use_time }}</text>
							</view>
						</view>
						<view class="coach-rating">
							<view class="stars">
								<text class="star">⭐</text>
								<text class="star">⭐</text>
								<text class="star">⭐</text>
								<text class="star">⭐</text>
								<text class="star">⭐</text>
							</view>
							<text class="rating-text">5.0</text>
						</view>
					</view>
					
					<view class="coach-actions">
						<view class="action-btn detail-btn" @tap="goto_teacher(item.id)">
							<text class="btn-icon">👁️</text>
							<text class="btn-text">详情</text>
						</view>
						<view class="action-btn book-btn" @tap="goto_appointment(item.id)">
							<text class="btn-icon">📅</text>
							<text class="btn-text">预约</text>
						</view>
						<view 
							class="action-btn follow-btn" 
							:class="{ 'followed': item.is_follow == 1 }"
							@tap="collect_teacher(item.id)"
						>
							<text class="btn-icon">{{ item.is_follow == 1 ? '❤️' : '🤍' }}</text>
							<text class="btn-text">{{ item.is_follow == 1 ? '已关注' : '关注' }}</text>
						</view>
					</view>
				</view>
				
				<!-- 空状态占位图 -->
				<view class="empty-state" v-if="products.length === 0">
					<view class="empty-icon">
						<text class="empty-emoji">🎱</text>
					</view>
					<text class="empty-title">暂无相关教练</text>
					<text class="empty-desc">{{ getEmptyMessage() }}</text>
					<view class="empty-btn" @tap="filterTeacher(-1)">
						<text class="empty-btn-text">查看全部</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部间距 -->
		<view class="bottom-spacer"></view>

		<!-- 悬浮聊天按钮 -->
		<view class="floating-chat" @tap="goToChat">
			<text class="chat-icon">💬</text>
		</view>

		<gui-footer-custom :navCurrents="0"></gui-footer-custom>
		<gui-iphone-bottom></gui-iphone-bottom>
	</view>
</template>

<script>
	var img =
		"https://images.unsplash.com/photo-1661956600684-97d3a4320e45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzNnx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60";
	export default {
		data() {
			return {
				nav_index: 0,
				teacher_type_index: -1, // -1表示全部，0-2对应球童、助教、教练
				teacher_nav_list: [{
						"icon": '🏓',
						"name": "球童",
						"type": 0
					},
					{
						"icon": '🎓',
						"name": "助教",
						"type": 1
					},
					{
						"icon": '👨‍🏫',
						"name": "教练",
						"type": 2
					}
				],
				shop_list: [],
				products: [],
				all_products: [], // 存储所有教练数据
				swiperItems: [],
				swiperItems2: [],
				nav_list: [{
					id: 0,
					name: '球伴'
				}, {
					id: 1,
					name: '球室'
				}],
				default_city: '武汉市',
				imgUri: img,
				lat:'',
				lon:''
			}
		},

		onLoad: function(query) {
			let _this = this;
			_this.$globalMethod();
			
			if (query.city) {
				console.log('走到这里定位2222');
				// 解码URL参数中的中文城市名称
				_this.default_city = decodeURIComponent(query.city);
			} else {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						_this.loadCity(res.longitude, res.latitude);
					}
				});
			}

			_this.userIndex();

			// 模拟api加载数据
			setTimeout(() => {
				this.swiperItems2 = [{
						img: img,
						url: '',
						title: "测试标题很长很长很长很长很长很长很长很长很长很长很长很长很长很长",
						opentype: 'click'
					},
					{
						img: img,
						url: '',
						title: "测试标题04",
						opentype: 'click'
					},
					{
						img: img,
						url: '',
						title: "测试标题05",
						opentype: 'click'
					}
				]
			}, 1000)
		},
		
		onShow: function() {
			let _this = this;
			
			// 检查全局数据中是否有新选择的城市
			if (getApp().globalData.selectedCity) {
				_this.default_city = getApp().globalData.selectedCity;
				// 清除全局数据
				getApp().globalData.selectedCity = null;
				// 重新加载数据
				_this.userIndex();
			}
			
			// 也可以检查本地存储中的城市选择
			const selectedCity = uni.getStorageSync('selected_city');
			if (selectedCity && selectedCity !== _this.default_city) {
				_this.default_city = selectedCity;
				// 重新加载数据
				_this.userIndex();
			}
		},
		methods: {
			// 获取空状态提示信息
			getEmptyMessage() {
				if (this.teacher_type_index === -1) {
					return '当前地区暂无教练，请稍后再试';
				} else if (this.teacher_type_index === 0) {
					return '当前地区暂无球童，试试其他类型吧';
				} else if (this.teacher_type_index === 1) {
					return '当前地区暂无助教，试试其他类型吧';
				} else if (this.teacher_type_index === 2) {
					return '当前地区暂无教练，试试其他类型吧';
				}
				return '暂无数据';
			},
			// 筛选教练类型
			filterTeacher(type) {
				this.teacher_type_index = type;
				if (type === -1) {
					// 显示全部
					this.products = [...this.all_products];
				} else {
					// 根据类型筛选
					this.products = this.all_products.filter(item => item.teacher_type === type);
				}
			},
			findItemById(id) {
				return this.products.findIndex(obj => obj.id === id);
			},
			//关注&取关
			collect_teacher(id) {
				let _this = this;
				this.graceJS.post(
					this.serverUrl + '/api.member/add_collect', {
						id: id
					}, {

					}, {
						token: _this.token
					},
					(res) => {
						console.log(res);
						if (res.code == 0) {
							var index = _this.findItemById(id);
							_this.products[index].is_follow = res.data.is_follow;
						}
					},
					(e) => {
						console.log(e);
					}
				);
			},
			swiperchange: function(e) {
				console.log(e);
			},
			taped: function(e) {
				uni.showToast({
					title: "您点击了第 " + e + " 个项目",
					icon: "none"
				});
			},
			navchange: function(index) {
				console.log(index);
				this.nav_index = index;
			},
			gotoInfo: function(idx, item) {
				console.log('商品索引 : ' + idx);
				console.log('商品索引 : ' + item);
				uni.navigateTo({
					url: "/pages/coach/details?id=" + idx
				})
			},
			goto_city: function() {
				uni.navigateTo({
					url: "/pages/index/city?default_city=" + encodeURIComponent(this.default_city)
				})
			},
			goto_shop_details: function(id) {
				uni.navigateTo({
					url: "/pages/shop/shop_details?id=" + id
				})
			},
			goToChat: function() {
				uni.navigateTo({
					url: "/pages/chat/list"
				})
			},
			userIndex() {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.index/user_index',
					data: {
						"city": _this.default_city,
						"lat":_this.lat,
						"lon":_this.lon
					},
					header: {
						token: _this.token
					},
					success: (res) => {
						_this.$refs.guipageloading.close();
						var return_data = res.data;
						if (return_data.code == 0) {
							_this.nav_list = return_data.data.index_tab_arr;
							
							// 为教练数据添加类型字段
							let teacherList = return_data.data.teacher_list;
							teacherList.forEach((teacher, index) => {
								// 随机分配教练类型：0-球童，1-助教，2-教练
								teacher.teacher_type = Math.floor(Math.random() * 3);
							});
							
							_this.products = teacherList;
							_this.all_products = [...teacherList]; // 保存所有数据
							_this.shop_list = return_data.data.shop_list;
							_this.swiperItems = return_data.data.banner_list;
						}
					}
				});
			},
			loadCity(longitude, latitude) {
				let _this = this;
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					data: {
						key: _this.gaodeKey,
						location: longitude + ',' + latitude,
						extensions: 'all'
					},
					success: (res) => {
						var return_data = res.data;
						if (return_data.status == 1) {
							if (res.data.regeocode.addressComponent.city == '') {
								_this.default_city = res.data.regeocode.addressComponent.province;
							} else {
								_this.default_city = res.data.regeocode.addressComponent.city;
							}
						} else {
							uni.showToast({
								title: return_data.msg,
								icon: 'error'
							});
						}
					}
				});
			},
			goto_city() {
				uni.navigateTo({
					url: "/pages/index/city?default_city=" + encodeURIComponent(this.default_city)
				})
			},
			goto_teacher(id){
				uni.navigateTo({
					url:'/pages/coach/details?id='+id
				})
			},
			goto_appointment(id) {
				uni.navigateTo({
					url: '/pages/order/appointment?id=' + id
				})
			}
		}
	}
</script>

<style>
/* 全局容器 */
.home-container {
	background: #f5f5f5;
	min-height: 100vh;
	position: relative;
}

/* 头部区域 */
.header-section {
	padding: 20rpx 30rpx;
	padding-top: 50rpx;
}

.location-bar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #ffffff;
	border-radius: 30rpx;
	padding: 12rpx 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	width: fit-content;
}

.location-icon {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.location-text {
	font-size: 24rpx;
	color: #333;
	font-weight: 500;
	margin-right: 8rpx;
}

.dropdown-icon {
	font-size: 18rpx;
	color: #666;
}

/* 轮播图区域 */
.swiper-section {
	padding: 20rpx 30rpx;
}

/* 导航切换 */
.nav-section {
	padding: 20rpx 30rpx;
}

.nav-container {
	display: flex;
	background: #ffffff;
	border-radius: 25rpx;
	padding: 8rpx;
	position: relative;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.nav-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	position: relative;
	z-index: 2;
	transition: all 0.3s ease;
}

.nav-text {
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
	transition: all 0.3s ease;
}

.nav-active .nav-text {
	color: #fff;
	font-weight: 600;
}

.nav-indicator {
	position: absolute;
	top: 8rpx;
	left: 8rpx;
	width: calc(50% - 8rpx);
	height: calc(100% - 16rpx);
	background: #5a9fd4;
	border-radius: 20rpx;
	transition: transform 0.3s ease;
	z-index: 1;
}

/* 内容区域 */
.content-section {
	padding: 0 30rpx;
	margin-bottom: 20rpx;
}

/* 球室列表样式 */
.shop-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.shop-card {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.shop-card:active {
	transform: scale(0.98);
}

.shop-image-container {
	position: relative;
	margin-right: 20rpx;
}

.shop-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 15rpx;
}

.shop-badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	background: #5a9fd4;
	color: white;
	font-size: 20rpx;
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
}

.shop-content {
	flex: 1;
}

.shop-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
}

.shop-address,
.shop-contact {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.address-icon,
.contact-icon {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.address-text,
.contact-text {
	font-size: 24rpx;
	color: #666;
}

.shop-arrow {
	margin-left: 20rpx;
}

.arrow-icon {
	font-size: 32rpx;
	color: #ccc;
}

/* 筛选器样式 */
.filter-section {
	margin-bottom: 30rpx;
}

.filter-container {
	display: flex;
	gap: 20rpx;
	padding: 20rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	overflow-x: auto;
}

.filter-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	border-radius: 15rpx;
	min-width: 120rpx;
	transition: all 0.3s ease;
}

.filter-item.active {
	background: #5a9fd4;
}

.filter-icon {
	font-size: 40rpx;
	margin-bottom: 8rpx;
}

.filter-text {
	font-size: 24rpx;
	color: #666;
}

.filter-item.active .filter-text {
	color: white;
}

/* 教练卡片样式 */
.coach-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.coach-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.coach-card:active {
	transform: translateY(-2rpx);
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.15);
}

.coach-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 30rpx;
}

.coach-avatar-container {
	position: relative;
	margin-right: 20rpx;
}

.coach-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	border: 4rpx solid #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.status-indicator {
	position: absolute;
	bottom: 0;
	right: 0;
	background: #ff4757;
	border-radius: 20rpx;
	padding: 4rpx 10rpx;
	border: 2rpx solid #fff;
}

.status-indicator.online {
	background: #2ed573;
}

.status-text {
	font-size: 20rpx;
	color: white;
	font-weight: 500;
}

.coach-info {
	flex: 1;
	margin-right: 20rpx;
}

.coach-name {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 10rpx;
}

.coach-meta {
	margin-bottom: 8rpx;
}

.distance-text,
.time-text {
	font-size: 24rpx;
	color: #666;
}

.coach-rating {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stars {
	display: flex;
	margin-bottom: 5rpx;
}

.star {
	font-size: 20rpx;
	margin-right: 2rpx;
}

.rating-text {
	font-size: 24rpx;
	color: #666;
	font-weight: 500;
}

.coach-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	border-radius: 15rpx;
	transition: all 0.3s ease;
}

.detail-btn {
	background: #5a9fd4;
}

.book-btn {
	background: #74b9ff;
}

.follow-btn {
	background: #999;
}

.follow-btn.followed {
	background: #ff4757;
}

.btn-icon {
	font-size: 32rpx;
	margin-bottom: 8rpx;
}

.btn-text {
	font-size: 24rpx;
	color: white;
	font-weight: 500;
}

/* 悬浮聊天按钮 */
.floating-chat {
	position: fixed;
	bottom: 200rpx;
	right: 30rpx;
	width: 100rpx;
	height: 100rpx;
	background: #5a9fd4;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 15rpx rgba(90, 159, 212, 0.3);
	z-index: 999;
	transition: all 0.3s ease;
}

.floating-chat:active {
	transform: scale(0.9);
}

.chat-icon {
	font-size: 40rpx;
	color: white;
}

/* 底部间距 */
.bottom-spacer {
	height: 200rpx;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 50rpx;
	background: #ffffff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	margin-top: 50rpx;
}

.empty-icon {
	width: 120rpx;
	height: 120rpx;
	background: #5a9fd4;
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30rpx;
	box-shadow: 0 4rpx 15rpx rgba(90, 159, 212, 0.2);
}

.empty-emoji {
	font-size: 60rpx;
}

.empty-title {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 20rpx;
}

.empty-desc {
	font-size: 28rpx;
	color: #666;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 40rpx;
}

.empty-btn {
	background: #5a9fd4;
	border-radius: 25rpx;
	padding: 20rpx 40rpx;
	transition: all 0.3s ease;
}

.empty-btn:active {
	transform: scale(0.98);
}

.empty-btn-text {
	color: white;
	font-size: 28rpx;
	font-weight: 500;
}

/* 原有样式保持兼容 */
.demo {
	width: 210rpx;
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	margin: 10rpx;
}

.demo-auto-width {
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
	margin: 10rpx;
}

.gui-text-small {
	font-size: 20rpx;
}

.gui-footer-icon-buttons {
	width: 130rpx;
	height: 80rpx;
	padding: 10rpx;
	flex: 1;
	position: relative;
	margin: 0;
	background-color: #F8F8F8;
}

.gui-footer-buttons-ab {
	position: absolute;
	z-index: 101;
	left: 325rpx;
	top: 0rpx;
	width: 110rpx;
	height: 150rpx;
}

.gui-footer-buttons-ab-icon {
	width: 110rpx;
	height: 110rpx;
	line-height: 120rpx;
	text-align: center;
	font-size: 68rpx;
	background-color: #F7F8FA;
	border-radius: 100rpx;
}

.gui-nav-bottom-color {
	color: #B6C3D2;
}

.gui-nav-bottom-active-color {
	color: #2B2E3D;
}

.gui-footer-icon-buttons {
	width: 120rpx;
	height: 80rpx;
	position: relative;
}

.gui-footer-buttons-ab {
	position: absolute;
	z-index: 101;
	left: 0;
	top: -50rpx;
	width: 100rpx;
	height: 150rpx;
}

.gui-footer-buttons-ab-icon {
	width: 100rpx;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	font-size: 60rpx;
	background-color: #F7F8FA;
	border-radius: 100rpx;
}

/* 保持原有卡片样式的兼容性 */
.gui-card-view {
	background-color: #FFFFFF;
	padding: 25rpx;
}

.gui-card-body {
	padding-bottom: 25rpx;
}

.gui-card-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 80rpx;
}

.gui-card-desc {
	width: 400rpx;
	margin-left: 25rpx;
	flex: 1;
}

.gui-card-name {
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
	margin-right: 20rpx;
}

.gui-card-text {
	line-height: 40rpx;
	font-size: 24rpx;
	color: #888888;
}

.gui-card-footer {
	margin-top: 25rpx;
}

.gui-card-footer-item {
	width: 100rpx;
	text-align: center;
	flex: 1;
	line-height: 38rpx;
	font-size: 26rpx;
	color: #666666;
}

/* #ifndef APP-NVUE */
.gui-card-footer-item {
	display: block;
}

.gui-box-shadow {
	box-shadow: 0px 0px 3rpx #999999;
}
/* #endif */
</style>